<template>
  <view class="ikz-picker">
    <picker
      mode="multiSelector"
      :value="multiIndex"
      :range="multiArray"
      @change="bindTimeChange"
      @columnchange="columnchange"
    >
      <view class="picker">
        <view style="font-size: 28rpx; color: #191b1d; line-height: 36rpx">
          预约时间
        </view>
        <view
          style="font-size: 28rpx; color: #191b1d; line-height: 36rpx"
          v-if="timers"
        >
          {{ multiArray[0][multiIndex[0]] }} {{ multiArray[1][multiIndex[1]] }}
        </view> 
        <view
          style="font-size: 28rpx; color: #191b1d; line-height: 36rpx;color:#333;"
          v-else
          >接单后35分钟送达</view
        >
      </view>
    </picker> 
  </view>
</template>

<script>
export default {
  name: "screen",
  props: {
    showData: {
      type: Object,
    },
  },
  data() {
    return {
      multiArray: [["今天", "明天", "后天"], []],
      defaultArrey: [
        "0:00-0:30",
        "0:30-1:00",
        "1:00-1:30",
        "1:30-2:00",
        "2:00-2:30",
        "2:30-3:00",
        "3:00-3:30",
        "3:30-4:00",
        "4:00-4:30",
        "4:30-5:00",
        "5:00-5:30",
        "5:30-6:00",
        "6:00-6:30",
        "6:30-7:00",
        "7:00-7:30",
        "7:30-8:00",
        "8:00-8:30",
        "8:30-9:00",
        "9:00-9:30",
        "9:30-10:00",
        "10:00-10:30",
        "10:30-11:00",
        "11:00-11:30",
        "11:30-12:00",
        "12:00-12:30",
        "12:30-13:00",
        "13:00-13:30",
        "13:30-14:00",
        "14:00-14:30",
        "14:30-15:00",
        "15:00-15:30",
        "15:30-16:00",
        "16:00-16:30",
        "16:30-17:00",
        "17:00-17:30",
        "17:30-18:00",
        "18:00-18:30",
        "18:30-19:00",
        "19:00-19:30",
        "19:30-20:00",
        "20:00-20:30",
        "20:30-21:00",
        "21:00-21:30",
        "21:30-22:00",
        "22:00-22:30",
        "22:30-23:00",
        "23:00-23:30",
        "23:30-0:00",
      ],
      multiIndex: [],
      timers: false,
    };
  },
  mounted() {
    this.$set(this.multiArray, 1, this.getTimeSlots());
  },
  methods: {
    getTimeSlots() {
      const now = new Date();
      let currentHour = now.getHours();
      let currentMinute = now.getMinutes();
      const timeSlots = [];

      // 定义结束时间为23:59
      const endHour = 23;
      const endMinute = 59;

      // 找到当前时间之后的第一个30分钟时间段
      if (currentMinute >= 30) {
        currentHour += 1;
        currentMinute = 0;
      } else {
        currentMinute = 30;
      }

      // 处理跨越午夜的情况
      if (
        currentHour > endHour ||
        (currentHour === endHour && currentMinute > endMinute)
      ) {
        currentHour = 0;
        currentMinute = 0;
      }

      // 添加“立即”选项
      timeSlots.push("立即");

      // 从当前时间之后的第一个30分钟时间段开始生成时间区间，直到23:59
      for (let hour = currentHour; hour <= endHour; hour++) {
        for (let minute = currentMinute; minute < 60; minute += 30) {
          // 计算开始时间
          let startTime = new Date(now);
          startTime.setHours(hour, minute, 0, 0);

          // 计算结束时间，为开始时间加上30分钟
          let endTime = new Date(startTime.getTime() + 30 * 60 * 1000);

          // 格式化时间字符串
          const formatTime = (date) => {
            let h = date.getHours();
            let m = date.getMinutes();
            return `${h < 10 ? "0" : ""}${h}:${m < 10 ? "0" : ""}${m}`;
          };

          const startTimeStr = formatTime(startTime);
          const endTimeStr = formatTime(endTime);

          // 添加到时间区间数组
          timeSlots.push(`${startTimeStr}-${endTimeStr}`);

          // 如果已经达到或超过23:59，结束循环
          if (hour === endHour && minute === endMinute) {
            break;
          }
        }
        // 处理分钟部分，确保如果是跨越午夜的情况重新设定分钟
        currentMinute = 0;
      }

      console.log(timeSlots);
      return timeSlots;
    },

    columnchange(e) {
      console.log(e.detail);
      if (e.detail.column == 0) {
        if (e.detail.value == 0) {
          this.$set(this.multiArray, 1, this.getTimeSlots());
        } else {
          this.$set(this.multiArray, 1, this.defaultArrey);
        }
      }
    },
    getTimestampsFromDateTimeRange(datetimeRangeStr) {
      // 分割日期和时间范围
      let [dateStr, timeRangeStr] = datetimeRangeStr.split(" ");
      // 分割时间范围为开始时间和结束时间
      let [startTimeStr, endTimeStr] = timeRangeStr.split("-");
      // 分割年、月、日
      let [year, month, day] = dateStr.split("-").map(Number);
      // 分割开始时间和结束时间的小时和分钟
      let startHourMinute = startTimeStr.split(":").map(Number);
      let endHourMinute = endTimeStr.split(":").map(Number);
      // 月份需要减去 1，因为 JavaScript 中月份是从 0 开始的
      let startDate = new Date(year, month - 1, day, ...startHourMinute);
      let endDate = new Date(year, month - 1, day, ...endHourMinute);
      // 获取时间戳
      let startTimestamp = startDate.getTime();
      let endTimestamp = endDate.getTime();
      return startTimestamp;
    },
    bindTimeChange(e) {
      console.log(e.detail.value);
      this.multiIndex = e.detail.value;
      if (!e.detail.value.every((element) => element === 0)) {
        if (!e.detail.value.every((element) => element === null)) {
          this.multiIndex = e.detail.value.map((item) =>
            item === null ? 0 : item
          );
        }
        const selectedDayIndex = this.multiIndex[0]; // 选中的天的索引
        const selectedTimeSlot = this.multiArray[1][this.multiIndex[1]]; // 选中的时间段
        const selectedDate = this.GetDateStr(selectedDayIndex); // 选中的日期
        // 将选中的日期和时间合并为一个完整的日期时间字符串
        const selectedDateTimeStr = `${selectedDate} ${selectedTimeSlot}`;
        // 将日期时间字符串转换为Date对象
        const selectedDateTime =
          this.getTimestampsFromDateTimeRange(selectedDateTimeStr);

        // 获取当前时间的Date对象
        const now = new Date();
        // 确保所选时间是未来的时间
        if (selectedDateTime <= now) {
          // 如果选择的时间小于或等于当前时间，则提示用户选择未来的时间
          this.timers = false;
          uni.showToast({
            title: "请选择大于当前时间的时间段",
            duration: 2000,
            icon: "none",
          });
          // 这里可以根据需要进行处理，例如：
          // - 显示一个提示信息给用户
          // - 阻止表单提交
          // - 重置选择器到一个合适的默认值
          this.$emit("returnTime");
        } else {
          this.timers = true;
          if (this.multiArray[0][this.multiIndex[0]] == "今天") {
            this.$emit(
              "returnTime",
              this.GetDateStr(0) + " " + this.multiArray[1][this.multiIndex[1]]
            );
          } else if (this.multiArray[0][this.multiIndex[0]] == "明天") {
            this.$emit(
              "returnTime",
              this.GetDateStr(1) + " " + this.multiArray[1][this.multiIndex[1]]
            );
          } else if (this.multiArray[0][this.multiIndex[0]] == "后天") {
            this.$emit(
              "returnTime",
              this.GetDateStr(2) + " " + this.multiArray[1][this.multiIndex[1]]
            );
          }
        }
      } else {
        console.log(this.multiArray);
        console.log(this.multiIndex);
        console.log(this.multiArray[1][this.multiIndex[1]]);
        console.log(this.GetDateStr(0));
        console.log(
          this.GetDateStr(0) + " " + this.multiArray[1][this.multiIndex[1]]
        );
        this.$emit(
          "returnTime",
          this.GetDateStr(0) + " " + this.multiArray[1][this.multiIndex[1]]
        );
        this.timers = true;
      }
    },
    GetDateStr(AddDayCount) {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1; //获取当前月份的日期
      var d = dd.getDate();
      return y + "-" + m + "-" + d;
    },
    closeScreen() {
      this.$emit("closeScreen", false);
      this.show_info.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
	.picker{
		  width:550rpx;
		display: flex; 
		justify-content: space-between;
	}
.ikz-picker {

  display: flex;
  justify-content: space-between;
}
</style>
